import { Col, Row } from "antd";
import { Pen } from "@meta2d/core";
import { PenStyle } from "@/components/Configuration/PenProps/components/PenStyle.tsx";
import React from "react";
import { PositionAndSize } from "@/components/Configuration/PenProps/components/PositionAndSize.tsx";
import { PenText } from "@/components/Configuration/PenProps/components/PenText.tsx";
import { PenImg } from "@/components/Configuration/PenProps/components/PenImg.tsx";
import { PenIconFont } from "@/components/Configuration/PenProps/components/PenIconFont.tsx";

interface Props {
  index: number;
  item: Pen;
  onChange: (key: keyof Pen, value: any, index: number) => void;
}

function ScrollContainer({ children }: { children: React.ReactNode }) {
  return <div style={{ height: 600, overflowY: "scroll" }}>{children}</div>;
}

function AnimationFrameItem(props: Props) {
  const handleSetValue = (key: keyof Pen, value: any) => {
    props.onChange(key, value, props.index);
  };
  return (
    <div>
      <Row gutter={[24, 16]}>
        <Col span={6}>
          <ScrollContainer>
            <PositionAndSize
              showDuration={true}
              setPenValue={handleSetValue}
              penOptions={props.item}
            ></PositionAndSize>
          </ScrollContainer>
        </Col>
        <Col span={6}>
          <ScrollContainer>
            <PenStyle
              setPenValue={handleSetValue}
              penOptions={props.item}
            ></PenStyle>
          </ScrollContainer>
        </Col>
        <Col span={6}>
          <ScrollContainer>
            <PenText
              setPenValue={handleSetValue}
              penOptions={props.item}
            ></PenText>
          </ScrollContainer>
        </Col>
        <Col span={6}>
          <ScrollContainer>
            <PenImg
              setPenValue={handleSetValue}
              penOptions={props.item}
            ></PenImg>
            <PenIconFont
              setPenValue={handleSetValue}
              penOptions={props.item}
            ></PenIconFont>
          </ScrollContainer>
        </Col>
      </Row>
    </div>
  );
}

export default React.memo(AnimationFrameItem);
